<template>
	<view class="con-box">
		<view class="page-content">
			<view class="homeBg"></view>
			<view class="account-info">
				<view class="left_info">
					<view class="avatarBox" v-if="userData.avatarUrl">
						<image @tap="navToPages('/pages/setting/account')" class="avatar" :src="userData.avatarUrl"
							mode="aspectFill"></image>
						<view class="isRealName" v-if="userData.isRealName == 1&&userData.avatarUrl">
							<image class="icon" src="../../static/user/icon/isRealName.png" mode="widthFix"></image>
							<text class="text">已认证</text>
						</view>
						<view class="isRealName" v-else-if="userData.isRealName == 0&&userData.avatarUrl">
							<image class="icon" src="../../static/user/icon/isRealName.png" mode="widthFix"></image>
							<text class="text">未认证</text>
						</view>
					</view>
					<view v-else class="avatarBox" @tap="navTo('/pages/login/login')">
						<image src="../../static/common/noLogin.png" mode="widthFix" class="avatar"></image>
						<view class="isRealName">
							<image class="icon" src="../../static/user/icon/isRealName.png" mode="widthFix"></image>
							<text class="text">未认证</text>
						</view>
					</view>

					<view class="userInfo" v-if="hasLogin">
						<!-- <view class="nickName" style="text-align: center;font-size: 26upx;">UID:{{userData.id}}</view> -->
						<view @tap="navToPages('/pages/setting/account')" class="nickName">{{userData.name}}</view>				
					</view>
					<view class="noLogo" v-else @tap="navTo('/pages/login/login')">
						<view>未登录</view>
					</view>
				</view>

				<view class="set_incon" @tap="navTo('/pages/setting/index')">
					<u-icon name="setting" color="#fff" size="42upx"></u-icon>
				</view>
			</view>
			<view class="orderList">
				<view class="order-item" @tap="navTo('/pages/user/myApply')">
					<image src="../../static/user/icon/icon15.png" class="icon" mode="widthFix"></image>
					<view class="text">我的抢购</view>
				</view>
				<view class="order-item" @tap="navTo('/pages/user/myCommission')">
					<image src="../../static/user/icon/icon16.png" class="icon" mode="widthFix"></image>
					<view class="text">我的委单</view>
				</view>
				<view class="order-item" @tap="navTo('/pages/user/myWarehouse')">
					<image src="../../static/user/icon/icon17.png" class="icon" mode="widthFix"></image>
					<view class="text">我的积分</view>
				</view>
			</view>
			<view class="info-card">
				<view class="info-card-item" v-for="(item,index) in menuList" :key="index">
					<view class="title">{{item.title}}</view>
					<view class="icon-bottom">
						<!--  :class="ind == 0||ind ==3?'active':''" -->
						<view class="card-item-content" v-for="(key,ind) in item.list" :key="ind"
							@tap="goMoreDetail(key.path)" >
							<image :src="key.imgUrl" mode="widthFix" class="icon-img"></image>
							<text class="text">{{key.name}}</text>
						</view>
					</view>
					<view class="icon-bottom" v-if="index == 0">
						<!-- 暂时关闭20220922 -->
						<!-- <view class="card-item-content" v-show="!userData.agentChannelCode && !userData.commendCode">
							<image src="@/static/user/icon/icon2.png" mode="widthFix"
								@tap="goMoreDetail('/pages/user/inviteFriends/inviteFriends')" class="icon-img"></image>
							<text class="text">补录邀请码</text>
						</view> -->
						<view class="card-item-content"></view>
						<view class="card-item-content"></view>
						<view class="card-item-content"></view>
					</view>
					<view class="bottom-line"></view>
				</view>
			</view>
			<view class="info-card info-card2">
				<view class="info-card-item">
					<view class="title">提货管理</view>
					<view class="icon-bottom2">
						<view class="card-item-content" v-for="(key,ind) in menuList2" :key="ind"
							@tap="goMoreDetail(key.path)">
							<image :src="key.imgUrl" mode="widthFix" class="icon-img" :class="ind == 5?'active':''">
							</image>
							<text class="text">{{key.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		getUserInfoNum,
	} from '../../api/user.js'

	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getUser
	} from '@/api/login.js'
	export default {
		data() {
			return {
				listData: [{
						imgUrl: require("@/static/user/menu1.png"),
						name: "购买订单",
						path: "/pages/user/myOrderList"
					}, {
						imgUrl: require("@/static/user/menu0.png"),
						name: "转售订单",
						path: "/pages/user/resaleOrder"
					}, {
						imgUrl: require("@/static/user/menu3.png"),
						name: "我的钱包",
						path: "/pages/user/myAssets"
					},
					{
						imgUrl: require("@/static/user/menu11.png"),
						name: "我的权益",
						path: "/pages/setting/openAccount"
					},
					// {
					// 	imgUrl:require("@/static/user/menu4.png"),
					// 	name:"我的积分",
					// 	path:"/pages/user/integral"
					// },
					// {
					// 	imgUrl:require("@/static/user/menu7.png"),
					// 	name:"消息通知",
					// 	path:"/pages/user/userNews"
					// }
				],
				// menuList: [{
				// 	imgUrl: require("@/static/user/menu5.png"),
				// 	name: "邀请好友",
				// 	path: "/pages/user/inviteFriends/inviteFriends"
				// }, {
				// 	imgUrl: require("@/static/user/menu12.png"),
				// 	name: "帮助与反馈",
				// 	path: "/pages/user/helpCenter"
				// }, {
				// 	imgUrl: require("@/static/user/menu13.png"),
				// 	name: "关于我们",
				// 	path: "/pages/setting/aboutMe"
				// }, ],
				menuList: [{
					title: '账户设置',
					list: [{
							imgUrl: require("@/static/user/icon/icon1.png"),
							name: "实名认证",
							path: "/pages/openAccount/index"
						},
						{
							imgUrl: require("@/static/user/icon/icon2.png"),
							name: "邀请码",
							path: "/pages/user/inviteFriends/inviteFriends1"
						},
						// 暂时关闭20220922
						{
							imgUrl: require("@/static/user/icon/icon3.png"),
							name: "银行卡",
							path: "/pages/setting/userBank"
						},
						{
							imgUrl: require("@/static/user/icon/icon4.png"),
							name: "资金",
							path: "myAssets"
						},
					]
				}, {
					title: '我的转让',
					list: [
						{
							imgUrl: require("@/static/user/icon/icon6.png"),
							name: "转让",
							path: "mySellOut"
						},
						{
							imgUrl: require("@/static/user/icon/icon5.png"),
							name: "受让",
							path: "myPurchase"
						},
						{
							imgUrl: require("@/static/user/icon/icon7.png"),
							name: "撤单",
							path: "myCancelOrder"
						},
						{
							imgUrl: require("@/static/user/icon/icon8.png"),
							name: "委托",
							path: "myEntrust"
						},
					]
				}],
				menuList2: [{
						imgUrl: require("@/static/user/icon/icon9.png"),
						name: "提货申请",
						path: "deliveryApproval"
					},
					// {
					// 	imgUrl: require("@/static/user/icon/icon10.png"),
					// 	name: "待受理",
					// 	path: ""
					// },
					// {
					// 	imgUrl: require("@/static/user/icon/icon11.png"),
					// 	name: "待发货",
					// 	path: ""
					// },
					// {
					// 	imgUrl: require("@/static/user/icon/icon12.png"),
					// 	name: "待收货",
					// 	path: ""
					// },
					// {
					// 	imgUrl: require("@/static/user/icon/icon13.png"),
					// 	name: "已收货",
					// 	path: ""
					// },
					// {
					// 	imgUrl: require("@/static/user/icon/icon14.png"),
					// 	name: "我的地址",
					// 	path: ""
					// }
				],
				userInfo: {},
				userData: {}
			};
		},
		async onShow() {
			let res = await getUser()
			if (res.status == 200) {
				this.userData = res.data.user;
				this.userData.avatarUrl = this.pathImg + res.data.user.headPortraitUrl;
				this.userData.name = res.data.user.nickname;
			}
		},
		computed: {
			...mapState(["hasLogin"]),
			// userData() {
			// 	let data = {};
			// 	if (this.$store.state.hasLogin && this.$store.state.uerInfo) {
			// 		data = this.$store.state.uerInfo;
			// 		data["avatarUrl"] = this.pathImg + data.headPortraitUrl;
			// 		data["name"] = data.nickname;
			// 	}
			// 	return data;
			// },
		},
		methods: {
			getUserData() {
				getUserInfoNum().then(res => { //获取收藏，浏览，关注数据
					if (res.data.success) {
						this.userInfo = res.data.obj
					}
				});
			},
			goMoreDetail(path) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "/pages/login/login"
					});
					return;
				}
				// if(path.includes('inviteFriends')){
				// 	if(this.userData.agentChannelCode||this.userData.commendCode){
				// 		path = "/pages/user/inviteFriends/inviteFriends1"
				// 	}
				// }
				if (path == '/pages/user/inviteFriends/inviteFriends') {
					if (this.userData.agentChannelCode || this.userData.commendCode) {
						this.$u.toast('你已添加了服务码或者邀请码，请检查。');
						return;
					} else {
						path = "/pages/user/inviteFriends/inviteFriends"
					}
				}
				uni.navigateTo({
					url: path
				});
				// if (this.userData.isRealName == 0 && path == '/pages/setting/openAccount') {
				// 	this.$u.toast('实名认证后才能开户！');
				// 	return;
				// }else {

				// }
			},
			navTo(url, type, index) {
				uni.navigateTo({
					url
				})
			},
			navToPages(url) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "/pages/login/login"
					});
					return;
				}
				uni.navigateTo({
					url
				});
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		min-height: 100%;
		background-color: #fff;
	}

	.con-box {
		width: 100%;
		min-height: 100%;

		.navigator {
			position: fixed;
			bottom: 120upx;
			left: 10%;
			width: 80%;
			height: 80upx;
			line-height: 80upx;
			border-radius: 10upx;
			font-family: PingFang SC;
			background-color: #2b267f;
			font-style: normal;
			font-size: 32upx;
			text-align: center;
			color: #fff;
			letter-spacing: 4upx;
		}

		.page-content {
			width: 100%;
			height: 100%;
			padding-top: 104upx;

			.homeBg {
				width: 100%;
				height: 668upx;
				background: url(../../static/login/bg.png) no-repeat top center;
				background-size: 100% 100%;
				position: fixed;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				// z-index: -1;
			}

			.account-info {
				display: flex;
				align-items: center;
				justify-content: center;
				// height: 480upx;
				// width: 100%;
				// background-image: url("../../static/login/bg.png");
				// background-size: 100% auto;
				padding: 0 30upx;
				position: relative;

				.myGoods {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30upx;

					.item {
						width: 48%;
						background-color: #7c6fa2;
						text-align: center;
						color: #fff;
						padding-top: 26upx;
						padding-bottom: 22upx;
						border-top-right-radius: 10upx;
						border-top-left-radius: 10upx;

						text {
							font-size: 50upx;
							line-height: 50upx;
							display: inline-block;
							margin-bottom: 10upx;
						}

						view {
							font-size: 24upx;
							line-height: 24upx;
						}
					}
				}

				.set_incon {
					width: 42upx;
					position: absolute;
					top: -6upx;
					right: 22upx;
				}

				.left_info {
					display: flex;
					align-items: center;
					flex-direction: column;
					position: relative;

					.isRealName {
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 34upx;
						background: linear-gradient(-55deg, #BF9935, #EDC763);
						border-radius: 30upx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;

						.text {
							transform: scale(0.8);
						}

						.icon {
							width: 22upx;
						}
					}

					.avatar {
						width: 130upx;
						height: 130upx;
						border-radius: 50%;
						// margin-right: 20upx;
					}

					.avatarBox {
						width: 130upx;
						height: 130upx;
						border-radius: 50%;
						// margin-right: 20upx;
						// background-color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-bottom: 6upx;
						position: relative;

						image {
							width: 130upx;
						}
					}

					.userInfo {
						padding-right: 10upx;
						flex: 1%;
						color: #FFF;

						// .renzheng-info{
						// 	display: flex;
						// 	align-items: center;
						// 	font-size: 22upx;
						// 	line-height: 22upx;
						// 	margin-top: 24upx;
						// 	color: rgba(255,255,255,0.8);
						// 	.look-btn{margin-left: 20upx;margin-right: 10upx;}
						// 	.renzheng{margin-right: 10upx;}
						// }
						.userType {
							font-size: 24upx;
							line-height: 24upx;
							margin-top: 12upx;
						}

						.nickName {
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							padding-top: 20upx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							max-width: 90vw;
						}
					}

					.noLogo {
						text-align: center;
						padding-top: 40upx;

						view {
							font-size: 32upx;
							font-family: MicrosoftYaHei;
							font-weight: bold;
							color: #FFF;
							line-height: 32upx;
						}

						text {
							display: inline-block;
							font-size: 24upx;
							line-height: 24upx;
							margin-top: 12upx;
							color: rgba(255, 255, 255, 0.8);
						}
					}
				}

				.right-Cont {
					padding-right: 20upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24upx;
					line-height: 24upx;

					>view {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-wrap: wrap;
					}

					>view:first-child {
						margin-right: 60upx;
					}

					text {
						margin-bottom: 18upx;
						width: 100%;
						font-size: 36upx;
						line-height: 36upx;
						display: block;
						text-align: center;
					}
				}
			}

			.orderList {
				width: 100%;
				padding: 0 86upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				z-index: 1;
				padding-top: 44upx;

				.order-item {
					// flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;

					.icon {
						width: 40upx;
					}

					.num {
						font-size: 30upx;
						font-weight: bold;
					}
				}
			}

			.info-card {
				width: 100%;
				background-color: #fff;
				border-radius: 42upx 42upx 0 0;
				position: relative;
				z-index: 1;
				padding-top: 12upx;
				margin-top: 30upx;

				.info-card-item {
					width: 100%;
					padding: 28upx 0 0;

					.title {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #010101;
						line-height: 30upx;
						padding: 0 40upx;
					}

					.icon-bottom {
						width: 100%;
						padding: 50upx 40upx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.card-item-content {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;

							.icon-img {
								width: 40upx;
							}

							.text {
								font-size: 26upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
								padding-top: 30upx;
							}
						}

						.active {
							align-items: flex-start;
						}
					}

					.bottom-line {
						width: 100%;
						height: 10upx;
						background: #F6F7F9;
						margin-top: 30upx;
					}
				}
			}

			.info-card2 {
				padding-top: 0;
				margin-top: 0upx;

				.icon-bottom2 {
					width: 100%;
					padding: 50upx 40upx 0;
					display: flex;
					align-items: center;
					// justify-content: space-between;
					flex-wrap: wrap;

					.card-item-content {
						width: 25%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						margin-bottom: 60upx;

						.icon-img {
							width: 40upx;
						}

						.text {
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							padding-top: 30upx;
						}
					}

					.active {
						width: 32upx !important;
					}
				}
			}

			.myOrderList {
				width: 100%;
				padding: 0 30upx;
				background-color: #fff;
				padding-bottom: 56upx;
				margin-bottom: 24upx;

				.listBox {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-wrap: wrap;
				}

				.title {
					margin-bottom: 20upx;
					padding-top: 40upx;
					line-height: 36upx;
					font-size: 36upx;
					color: #1B1B1B;
				}

				.item-info {
					width: auto;
					height: 100%;
					text-align: center;
					flex: 0 0 22.5%;
					/* 右边距，默认使用css函数去计算 */
					margin-right: calc(10% / 4);

					image {
						height: 70upx;
						margin-bottom: 6upx;
					}

					.item-key {
						line-height: 24upx;
						line-height: 24upx;
						text-align: center;
						color: #333;
						font-size: 24upx;
					}
				}

				/* 去除每行尾多余的边距 */
				.item-info:nth-child(4n) {
					margin-right: 0;
				}

				.item-info:nth-child(5),
				.item-info:nth-child(6),
				.item-info:nth-child(7),
				.item-info:nth-child(8) {
					margin-bottom: 0;
				}
			}

			.assets-info {
				width: 100%;
				background-color: #fff;
				padding: 0 30upx;
				display: flex;
				align-items: center;
				/* flex-start:  默认从头开始排列*/
				justify-content: flex-start;
				flex-wrap: wrap;

				.item-info {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F7F7F7;
					padding: 22upx 0;

					.content {
						display: flex;
						align-items: center;
						justify-content: flex-start;

						image {
							height: 50upx;
						}

						.item-key {
							margin-left: 8upx;
							line-height: 28upx;
							text-align: center;
							color: #333;
							font-size: 28upx;
						}
					}
				}
			}

			.nft-info {
				width: 100%;
				padding: 60upx 74upx 0 74upx;

				.nft-info-main {
					width: 100%;
					padding: 30upx;
					height: 160upx;
					border-radius: 10upx;
					background-color: rgba(84, 84, 84, 0.6);
					font-size: 28upx;
					font-family: MicrosoftYaHei;
					color: #AAA4A4;

					.renzheng-info {
						display: flex;
						align-items: center;
						font-family: PingFang SC;
						font-style: normal;
						font-weight: normal;
						font-size: 28upx;
						line-height: 48upx;
						color: #ADADAD;

						.renzheng {
							font-family: PingFang SC;
							font-style: normal;
							font-weight: 600;
							font-size: 28upx;
							line-height: 48upx;
							color: #FF174E;
							margin-right: 6upx;
						}

						.link-address {
							margin-right: 10upx;
						}

						.look-btn {
							font-family: PingFang SC;
							font-style: normal;
							font-weight: 600;
							font-size: 28upx;
							line-height: 48upx;
							float: right;
							// color: #FFFFFF;
						}
					}
				}
			}

			.nodeLogin {
				text-align: center;
				padding-top: 165upx;

				.noData {
					width: 220upx;
					margin: 0 auto;
					opacity: 0.2;

					.noDataImg {
						width: 220upx;
						height: 180upx;
					}

					view {
						margin-top: 36upx;
						color: #fff;
						font-size: 22upx;
					}
				}
			}

			.show-list {
				width: 100%;
				overflow-x: scroll;
				padding: 70upx 0 0;
				position: relative;

				.show-menu {
					height: 32upx;
					display: flex;
					width: 100%;
					align-items: center;
					justify-content: space-between;

					.box {
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.title {
						font-family: PingFang SC;
						font-style: normal;
						font-size: 32upx;
						line-height: 32upx;
						color: #FFFFFF;
						margin-right: 20upx;
					}

					.total-number {
						width: 160upx;
						font-family: DIN;
						font-style: normal;
						font-size: 32upx;
						color: #FFFFFF;
						mix-blend-mode: normal;
						opacity: 0.6;
						line-height: 32upx;
					}
				}

				.show-goods {
					width: 100%;
					padding-bottom: 40upx;

					.msg {
						text-align: center;
						color: rgba(255, 255, 255, .5);
						font-size: 24upx;
						margin-top: 20upx;
						padding-bottom: 10upx;
					}

					.more {
						width: 100%;
						text-align: center;
						font-family: PingFang SC;
						font-style: normal;
						font-weight: 600;
						font-size: 28upx;
						line-height: 40upx;
						color: #aaaaaa;
						opacity: 0.8;
						padding: 30upx 0;
					}

					.show-goods_item {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.item-list {
							margin-top: 30upx;
							width: 300upx;
							min-height: 440upx;
							padding: 20upx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							position: relative;

							.goodsBg {
								width: 100%;
								position: absolute;
								bottom: 20upx;
								left: 0;
							}

							.image-box {
								box-sizing: border-box;
								width: 100%;
								height: 300upx;
								position: relative;

								view {
									overflow: hidden;
									width: 100%;
									height: 100%;
									display: flex;
									align-items: center;
								}

								image {
									width: 90%;
									height: 100%;
									margin: 0 auto;
									border-radius: 26upx;
								}
							}

							.goods-info {
								.goods-name {
									font-size: 24upx;
									line-height: 24upx;
									color: #fff;
									text-overflow: ellipsis;
									overflow: hidden;
									white-space: nowrap;
									text-align: center;
								}

								.goods_nftNo {
									text-align: center;
									font-size: 22upx;
									color: #666;
									margin-top: 10upx;
									text-overflow: ellipsis;
									overflow: hidden;
									white-space: nowrap;
								}

								.goods-desc {
									width: 100%;
									display: flex;
									padding-top: 12upx;
									height: 48upx;
									align-items: center;

									image {
										border-radius: 50%;
										width: 32upx;
										height: 32upx;
									}

									.source {
										margin-left: 6upx;
										font-family: PingFang SC;
										font-style: normal;
										font-weight: normal;
										font-size: 24upx;
										line-height: 36upx;
										color: #FFFFFF;
										mix-blend-mode: normal;
										opacity: 0.3;
										text-overflow: ellipsis;
										overflow: hidden;
										white-space: nowrap;
									}
								}
							}
						}
					}

				}

				.empty-goods {
					position: relative;
					width: 100%;
					height: calc(100vh - 762upx);

					.noData {
						position: absolute;
						width: 220upx;
						height: 180upx;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -90%);

						.noDataImg {
							width: 220upx;
							height: 180upx;
						}
					}

					.dengguang {
						width: 100%;
						text-align: center;

						image {
							width: 384upx;
							height: 174upx;
						}
					}

					.desc {
						padding: 36upx 0;
						width: 100%;
						text-align: center;
						font-family: PingFang SC;
						font-style: normal;
						font-weight: normal;
						font-size: 30upx;
						line-height: 42upx;
						text-align: center;
						color: #AAAAAA;
						opacity: 0.6;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -34%);
					}

					.goods-platform {
						width: 100%;
						text-align: center;

						image {
							width: 320upx;
							height: 170upx;
						}
					}
				}
			}
		}
	}
</style>
